<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
	<link rel="stylesheet" type="text/css" href="../css/iconfont.css">
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		#header{
			height:150px;
			border:1px black solid ;
		}
		#main{
			height:500px;
			border:1px solid black;
		}
		#caidan{
			position:relative;
		}
		.caidanliebiao{
			list-style: none;
			width:100px;


	}
		.caidanliebiao li{
			border:1px solid black;
			
		}
		.caidanliebiao li a{
			text-decoration: none;
			/*margin:0 auto;*/
			/*无法居中*/
		}
		#wenzhangxiangqing{
			position: absolute;
			width:1450px;
			height:500px;
			top:0px;
			left:100px;
			border:1px solid black;
			display:none;
		}
		#liuyanxiangqing{
			position:absolute;
			width:1450px;
			height:500px;
			top:0px;
			left:100px;
			border:1px solid black;
			display:none;

		}
	</style>
</head>
<body>
	<div id="header">
		<h1>刘一波的网站</h1>
	</div>
	<div id="main">
		<!-- 左边菜单 -->
		<div id="caidan">
			<ul class="caidanliebiao">
				<li><a href="">主页</a></li>
				<li><a href="">文章</a></li>
				<li><a href="">留言</a></li>
			</ul>
			<div id="wenzhangxiangqing">
				文章详情
			</div>
			<div id="liuyanxiangqing">
				留言详情
			</div>
		</div>


	</div>
	<div id="footer">
		尾部
	</div>
</body>
<script type="text/javascript">
var caidanliebiao = document.getElementsByClassName("caidanliebiao");
var wenzhangxiangqing = document.getElementById("wenzhangxiangqing");
var liuyanxiangqing = document.getElementById("liuyanxiangqing");
// console.log(caidanliebiao[0]);
// console.log(caidanliebiao[0].childNodes);
caidanliebiao[0].childNodes[3].addEventListener('mouseover',function(){
wenzhangxiangqing.style.display = "block";
});
caidanliebiao[0].childNodes[3].addEventListener('mouseout',function(){
wenzhangxiangqing.style.display = "none";
});
wenzhangxiangqing.addEventListener("mouseover",function(){
	wenzhangxiangqing.style.display = "block";
});
wenzhangxiangqing.addEventListener("mouseout",function(){
	wenzhangxiangqing.style.display = "none";
});
caidanliebiao[0].childNodes[5].addEventListener('mouseover',function(){
liuyanxiangqing.style.display = "block";
});
caidanliebiao[0].childNodes[5].addEventListener('mouseout',function(){
liuyanxiangqing.style.display = "none";
});
liuyanxiangqing.addEventListener("mouseover",function(){
	liuyanxiangqing.style.display = "block";
});
liuyanxiangqing.addEventListener("mouseout",function(){
	liuyanxiangqing.style.display = "none";
});
</script>
</html>